<template>
  <div>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>生产管理</el-breadcrumb-item>
      <el-breadcrumb-item>生产工单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->
    <!--  搜索栏开始 -->
    <el-form
      style="margin-top: 15px"
      :inline="true"
      :model="queryWorkorder"
      class="demo-form-inline"
    >
      <el-form-item label="工单编码">
        <el-input
          v-model="queryWorkorder.workorderCode"
          placeholder="请输入工单编码"
          clearable
        />
      </el-form-item>
      <el-form-item label="工单名称">
        <el-input
          v-model="queryWorkorder.workorderName"
          placeholder="请输入工单名称"
          clearable
        />
      </el-form-item>

      <el-form-item label="来源单据">
        <el-input
          v-model="queryWorkorder.sourceCode"
          placeholder="请输入来源单据"
          clearable
        />
      </el-form-item>
      <el-form-item label="产品编号">
        <el-input
          v-model="queryWorkorder.productCode"
          placeholder="请输入产品编号"
          clearable
        />
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input
          v-model="queryWorkorder.productName"
          placeholder="请输入产品名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="客户编码">
        <el-input
          v-model="queryWorkorder.clientCode"
          placeholder="请输入客户编码"
          clearable
        />
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input
          v-model="queryWorkorder.clientName"
          placeholder="请输入客户名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadWorkorder">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadWorkorderr">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  搜索栏结束 -->
    <!--工具栏开始-->
    <el-button @click="addWorkorder" type="primary"
      ><el-icon> <Plus /> </el-icon>新增</el-button
    >
    <el-button type="warning"
      ><el-icon> <EditPen /> </el-icon>导出</el-button
    >
    <!--工具类栏结束-->
    <!-- 表格 开始 -->
    <el-table
      ref="workorderTable"
      :data="workorders"
      max-height="800px"
      stripe="true"
      border="true"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        align="center"
        label="工单编码"
        property="workorderCode"
      />
      <el-table-column
        align="center"
        label="工单名称"
        property="workorderName"
      />
      <el-table-column align="center" label="工单来源" property="sourceCode" />
      <el-table-column align="center" label="产品编号" property="productCode" />
      <el-table-column align="center" label="产品名称" property="productName" />
      <el-table-column align="center" label="规格型号" property="productSpc" />
      <el-table-column align="center" label="单位" property="unitOfMeasure" />
      <el-table-column align="center" label="工单数量" property="quantity" />
      <el-table-column
        align="center"
        label="调整数量"
        property="quntityChanged"
      />
      <el-table-column
        align="center"
        label="已生产数量"
        property="quntityProduced"
      />
      <el-table-column align="center" label="批次号" property="batchCode" />
      <el-table-column align="center" label="客户编码" property="clientCode" />
      <el-table-column align="center" label="客户名称" property="clientName" />
      <el-table-column
        align="center"
        label="需求日期"
        :formatter="timeFormatter"
        property="requestDate"
      />
      <el-table-column align="center" label="单据状态" property="status">
        <template #default="scope">
          <!-- scope.row 就是整行数据-->
          <el-tag
            v-if="scope.row.status == 'PREPARE'"
            class="ml-2"
            type="success"
            >草稿</el-tag
          >
          <el-tag
            v-if="scope.row.status == 'CONFIRMED'"
            class="ml-2"
            type="primary"
            >已确认</el-tag
          >
          <el-tag
            v-if="scope.row.status == 'FINISHED'"
            class="ml-2"
            type="danger"
            >已完成</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column width="150" align="center" label="操作">
        <template #default="scope">
          <el-button
            size="small"
            v-if="scope.row.status == 'CONFIRMED'"
            @click="addSubworkOrder(scope.row)"
            ><el-icon><Plus /></el-icon>新增</el-button
          >
          <el-button size="small" v-if="scope.row.status == 'PREPARE'"
            ><el-icon><EditPen /></el-icon>修改</el-button
          >
          <el-button
            size="small"
            v-if="scope.row.status == 'CONFIRMED'"
            @click="finished(scope.row)"
            ><el-icon><CircleCheck /></el-icon>完成</el-button
          >
          <el-button
            size="small"
            v-if="scope.row.status == 'PREPARE'"
            @click="deleterow(scope.row)"
            ><el-icon><Delete /></el-icon>删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!--分页开始-->
    <el-pagination
      style="margin-top: 15px"
      :page-size="workorderLimit"
      :pager-count="workorderMaxPage"
      @current-change="changePage"
      layout="prev, pager, next"
      :total="workorderTotal"
    />
    <!--分页结束-->
    <!--新增工单的弹窗开始-->
    <el-dialog
      v-model="addWorkorderDataDialogVisible"
      title="生产工单"
      width="600"
      align-center
    >
      <el-form
        label-width="100px"
        :model="addWorkorderData"
        style="max-width: 460px"
      >
        <el-form-item label="工单编号">
          <el-input v-model="addWorkorderData.workorderCode" />
          <el-switch
            @change="autoGenWorkorderCode"
            v-model="autoWorkorderCode"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
        </el-form-item>

        <el-form-item label="工单名称">
          <el-input
            v-model="addWorkorderData.workorderName"
            placeholder="请输入工单名称"
          />
        </el-form-item>

        <el-form-item label="来源类型">
          <el-radio-group v-model="addWorkorderData.orderSource" class="ml-4">
            <el-radio label="1" model-value="客户订单" size="large"
              >客户订单</el-radio
            >
            <el-radio label="2" model-value="库存备货" size="large"
              >库存备货</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="单据状态">
          <el-input
            disabled
            v-model="addWorkorderData.status"
            placeholder="草稿"
          />
        </el-form-item>
        <el-form-item label="产品ID">
          <el-input
            v-model="addWorkorderData.productId"
            placeholder="请输入产品ID"
          />
        </el-form-item>
        <el-form-item label="产品编号">
          <el-input
            v-model="addWorkorderData.productCode"
            placeholder="请输入产品编号"
          />
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input
            v-model="addWorkorderData.productName"
            placeholder="请输入产品名称"
          />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input
            v-model="addWorkorderData.productSpc"
            placeholder="请输入规格类型"
          />
        </el-form-item>

        <el-form-item label="单位">
          <el-input
            v-model="addWorkorderData.unitOfMeasure"
            placeholder="请输入单位"
          />
        </el-form-item>
        <el-form-item label="工单数量">
          <el-input-number
            v-model="addWorkorderData.quantity"
            :min="1"
            :max="1000"
          />
        </el-form-item>
        <el-form-item label="需求日期">
          <el-date-picker
            v-model="addWorkorderData.requestDate"
            type="datetime"
            value-format="YYYY-MM-DD"
            placeholder="请选择日期"
          />
        </el-form-item>
        <el-form-item label="批次号">
          <el-input
            v-model="addWorkorderData.batchCode"
            placeholder="请输入批次号"
          />
        </el-form-item>
        <el-form-item v-if="addWorkorderData.orderSource == 1" label="客户编码">
          <el-input
            v-model="addWorkorderData.clientCode"
            placeholder="请输入客户编码"
          />
        </el-form-item>
        <el-form-item v-if="addWorkorderData.orderSource == 1" label="客户名称">
          <el-input
            v-model="addWorkorderData.clientName"
            placeholder="请输入客户名称"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAddData">取消</el-button>
          <el-button type="primary" @click="doAddData()"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--新增工单的弹窗结束-->
    <!--确认提示框开始-->
    <el-dialog
      v-model="CompleteTheTip"
      title="系统提示"
      width="600"
      align-center
    >
      <template #footer>
        <span class="dialog-footer">
          <el-alert
            title="确认完成工单?一单完成,此工单将无法继续报工"
            type="error"
          />
          <el-button @click="cancelfinished">取消</el-button>
          <el-button type="primary" @click="completeWorkorders">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!--确认提示框结束-->
    <!--删除提示框开始-->
    <el-dialog v-model="deleteTheTip" title="系统提示" width="600" align-center>
      <template #footer>
        <span class="dialog-footer">
          <el-alert title="是否删除此行数据" type="error" />
          <el-button @click="canceldelete">取消</el-button>
          <el-button type="primary" @click="confirmdelete">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!--删除提示框结束-->
    <!--新增子工单弹窗开始-->
    <el-dialog
      v-model="addSubworkOrderDialogVisible"
      title="生产工单"
      width="600"
      align-center
    >
      <el-form
        label-width="100px"
        :model="addWorkorderData"
        style="max-width: 460px"
      >
        <el-form-item label="工单编号">
          <el-input v-model="addWorkorderData.workorderCode" />
          <el-switch
            @change="autoGenWorkorderCode"
            v-model="autoWorkorderCode"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
        </el-form-item>

        <el-form-item label="工单名称">
          <el-input
            v-model="addWorkorderData.workorderName"
            placeholder="请输入工单名称"
          />
        </el-form-item>

        <el-form-item label="来源类型">
          <el-radio-group v-model="addWorkorderData.orderSource" class="ml-4">
            <el-radio label="1" model-value="客户订单" size="large"
              >客户订单</el-radio
            >
            <el-radio label="2" model-value="库存备货" size="large"
              >库存备货</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="单据状态">
          <el-input
            disabled
            v-model="addWorkorderData.status"
            placeholder="草稿"
          />
        </el-form-item>
        <el-form-item label="产品ID">
          <el-input
            v-model="addWorkorderData.productId"
            placeholder="请输入产品ID"
          />
        </el-form-item>
        <el-form-item label="产品编号">
          <el-input
            v-model="addWorkorderData.productCode"
            placeholder="请输入产品编号"
          />
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input
            v-model="addWorkorderData.productName"
            placeholder="请输入产品名称"
          />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input
            v-model="addWorkorderData.productSpc"
            placeholder="请输入规格类型"
          />
        </el-form-item>

        <el-form-item label="单位">
          <el-input
            v-model="addWorkorderData.unitOfMeasure"
            placeholder="请输入单位"
          />
        </el-form-item>
        <el-form-item label="工单数量">
          <el-input-number
            v-model="addWorkorderData.quantity"
            :min="1"
            :max="1000"
          />
        </el-form-item>
        <el-form-item label="需求日期">
          <el-date-picker
            v-model="addWorkorderData.requestDate"
            type="datetime"
            value-format="YYYY-MM-DD"
            placeholder="请选择日期"
          />
        </el-form-item>
        <el-form-item label="批次号">
          <el-input
            v-model="addWorkorderData.batchCode"
            placeholder="请输入批次号"
          />
        </el-form-item>
        <el-form-item v-if="addWorkorderData.orderSource == 1" label="客户编码">
          <el-input
            v-model="addWorkorderData.clientCode"
            placeholder="请输入客户编码"
          />
        </el-form-item>
        <el-form-item v-if="addWorkorderData.orderSource == 1" label="客户名称">
          <el-input
            v-model="addWorkorderData.clientName"
            placeholder="请输入客户名称"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelSubworkOrder">取消</el-button>
          <el-button type="primary" @click="doSubworkOrder"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--新增子工单弹窗结束-->
  </div>
</template>
<script>
import workorderRequest from "../../../api/pro-workorder.js";
import tools from "../../../util/tools.js";
export default {
  data() {
    return {
      queryWorkorder: {}, // 分装查询生产工单条件的对象
      workorders: [], //工单数据列表
      workorderCurrPage: 1, // 工单分页的当前页码
      workorderLimit: 10, // 工单分页的每页大小
      workorderTotal: 0, // 工单分页的总条数
      workorderMaxPage: 10, // 工单分页的最大页码
      addWorkorderDataDialogVisible: false, //新增工单的弹窗提示
      addWorkorderData: {
        status: "PREPARE",
      }, //新增工单对象
      autoWorkorderCode: false,
      CompleteTheTip: false,
      completeWorkorderCode: null, //需要完成的编号
      deleteTheTip: false,
      deleteWorkorderCode: null, //需要删除的编号
      addSubworkOrderDialogVisible: false, //新增子工单弹窗提示
    };
  },
  methods: {
    /**提交子单*/
    doSubworkOrder() {
      workorderRequest.save(this.addWorkorderData, (res) => {
        if (res.code == "200") {
          this.$message({
            message: "添加工单成功",
            type: "success",
          });
          //关闭窗体
          this.addSubworkOrderDialogVisible = false;
          // 重新加载数据
          this.loadWorkorders();
          // 将addWorkorderDatar制空

          this.addWorkorderData = {};
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
    /**
     * 取消增加子单
     */
    cancelSubworkOrder() {
      this.addWorkorderData = {};
      this.addSubworkOrderDialogVisible = false;
    },

    /**
     * 增加子工单
     */
    addSubworkOrder(row) {
      this.addWorkorderData.parentId = row.workorderId;
      console.log(this.addWorkorderData.parentId);
      this.addWorkorderData.ancestors = 0;
      this.addSubworkOrderDialogVisible = true;
    },
    /**
     * 删除提交信息到后端
     */

    confirmdelete() {
      console.log(this.deleteWorkorderCode);
      workorderRequest.deleteWorkorder(this.deleteWorkorderCode, (res) => {
        if (res.code == "200") {
          this.loadWorkorders();
          this.deleteTheTip = false;
        }
      });
    },
    /**
     * 取消删除
     */
    canceldelete() {
      this.deleteTheTip = false;
    },
    /**
     * 删除信息
     */
    deleterow(row) {
      this.deleteWorkorderCode = row.workorderCode;
      this.deleteTheTip = true;
    },
    /**
     * 取消确认完成的提示框
     */
    cancelfinished() {
      this.CompleteTheTip = false;
    },
    /**
     * 完成确认完成的提示框
     */
    completeWorkorders() {
      console.log(this.completeWorkorderCode);
      workorderRequest.updateStatus(this.completeWorkorderCode, (res) => {
        if (res.code == "200") {
          this.loadWorkorders();
          this.CompleteTheTip = false;
        }
      });
    },
    /**
     * 确认完成的提示框
     */
    finished(row) {
      this.CompleteTheTip = true;
      this.completeWorkorderCode = row.workorderCode;
    },
    /**
     * 分页当前页设置
     */
    changePage(value) {
      this.workorderCurrPage = value;
      this.loadWorkorders();
    },
    /**
     * 新增工单提交
     */
    doAddData() {
      workorderRequest.save(this.addWorkorderData, (res) => {
        if (res.code == "200") {
          this.$message({
            message: "添加工单成功",
            type: "success",
          });
          //关闭窗体
          this.addWorkorderDataDialogVisible = false;
          // 重新加载数据
          this.loadWorkorders();
          // 将addWorkorderDatar制空

          this.addWorkorderData = {};
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
    /**
     * 取消新增工单
     */
    cancelAddData() {
      this.addWorkorderData = {};
      this.addWorkorderDataDialogVisible = false;
    },
    /**
     * 自动生成工单编号
     */
    autoGenWorkorderCode(val) {
      if (val) {
        workorderRequest.genWorkoderCode((res) => {
          this.addWorkorderData.workorderCode = res.data;
        });
      }
    },
    /**
     * 搜索重置
     */
    loadWorkorderr() {
      (this.queryWorkorder = {}),
        workorderRequest.list(
          this.workorderCurrPage,
          this.workorderLimit,
          this.queryWorkorder,
          (res) => {
            // 设置数据
            this.workorders = res.data.list;
            this.workorderTotal = res.data.total;
            this.workorderMaxPage = res.data.pages;
          }
        );
    },
    /**
     * 分页查询的方法
     */
    loadWorkorder() {
      console.log("11111111");
      workorderRequest.list(
        this.workorderCurrPage,
        this.workorderLimit,
        this.queryWorkorder,
        (res) => {
          // 设置数据
          this.workorders = res.data.list;
          this.workorderTotal = res.data.total;
          this.workorderMaxPage = res.data.pages;
        }
      );
    },
    /**
     * 时间转换成字符串类型
     */
    timeFormatter(row, column, time) {
      return tools.timeMillisToString(time);
    },
    /**
     * 分页总查询
     */
    loadWorkorders() {
      workorderRequest.get(
        this.workorderCurrPage,
        this.workorderLimit,
        (res) => {
          console.log(res.data.total);
          console.log(res.data.pages);
          // 设置数据
          this.workorders = res.data.list;
          this.workorderTotal = res.data.total;
          this.workorderMaxPage = res.data.pages;
        }
      );
    },
    addWorkorder() {
      this.addWorkorderData.ancestors = 0;
      this.addWorkorderData.parentId = 0;
      this.addWorkorderDataDialogVisible = true;
    },
  },
  mounted() {
    this.loadWorkorders();
  },
};
</script>
